<template>
    <div class="login_wrap">
        <div class="formWrap">
            <div class="formTitle">
                <el-row justify="space-between">
                    <el-col :span="11" align="left" class="pageName">{{ pageName }}</el-col>
                    <el-col :span="11" align="right"><img src="../../assets/logo.png" class="logo" /></el-col>
                </el-row>
            </div>
            <br>
            <el-form :model="resetForm" style="max-width: 460px" ref="resetFormRef">
                <el-form-item prop="email" :rules="emailRules">
                    <el-input prefix-icon="message" size="large" v-model="resetForm.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item prop="captcha" :rules="captchaRules">
                    <el-row justify="space-between">
                        <el-col :span="12">
                            <el-input prefix-icon="ChatRound" size="large" v-model="resetForm.captcha"
                                placeholder="请输入验证码" />
                        </el-col>
                        <el-col :span="7">
                            <el-button type="primary" size="large" @click="handleSendCaptcha">发送验证码</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item prop="password" :rules="passwordRules">
                    <el-input prefix-icon="lock" size="large" v-model="resetForm.password" type="password"
                        placeholder="请输入新密码" :show-password=true />
                </el-form-item>
                <el-button type="primary" size="large" class="login_btn" @click="handleReset">重置密码</el-button>
            </el-form>
            <el-button plain class="register_btn" @click="router.push('/login')">返回登录</el-button>
        </div>
    </div>
</template>
  
<script setup>
import router from '@/router';
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
import { sendCaptcha, resetPassword } from '@/utils/request'

const pageName = ref('重置密码')

// 表单校验
const emailRules = [
    {
        required: true,
        message: '请输入邮箱',
        trigger: 'blur'
    },
    {
        pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
        message: '请输入正确邮箱',
        trigger: 'blur'
    }
]
const captchaRules = [
    {
        required: true,
        message: '请输入验证码',
        trigger: 'blur'
    },
    {
        pattern: /^[0-9]{6}/,
        message: '验证码为6位数字',
        trigger: 'blur'
    }
]
const passwordRules = [
    {
        required: true,
        message: '请输入密码',
        trigger: 'blur',
    },
    {
        min: 6,
        max: 30,
        message: '长度在6-30之间',
        trigger: 'blur',
    },
]

const resetForm = reactive({
    email: '',
    password: '',
    captcha: '',
    roleName: '管理员'
})
const resetFormRef = ref();
function handleReset() {
    // 表单校验
    resetFormRef.value?.validate((res) => {
        if (res) {
            resetPassword(resetForm).then(res => {
                if (res.data.code == 200) {
                    // 响应成功
                    ElMessage.success(res.data.message || '密码重置成功')
                    router.push("/login")
                } else {
                    // 响应失败
                    ElMessage.error(res.data.message || '服务器出错')
                }
            })
        } else {
            ElMessage.error("请正确填写信息");
        }
    })
};
function handleSendCaptcha() {
    sendCaptcha(resetForm.email, "重置").then(async res => {
        if (res.data.code == 200) {
            // 响应成功
            ElMessage.success(res.data.message || '验证码发送成功')
        } else {
            // 响应失败
            ElMessage.error(res.data.message || '服务器出错')
        }
    })
}
</script>
<style>
body,
html {
    padding: 0;
    margin: 0;
}

.pageName {
    font-size: 30px;
}

.logo {
    width: 40px;
}

.login_wrap {
    width: 100%;
    height: 100vh;
    background-color: rgb(13, 136, 207);
    display: inline-flex;
}

.loginUser {
    background-color: #f4f4f5;
    padding: 5px;
}

.loginUserBtn {
    font-size: 20px;
}


.formWrap {
    padding: 40px;
    background-color: white;
    border-radius: 20px;
    margin: auto;
    width: 350px;
}


.forgetPassword {
    margin: 0;
    line-height: 40px;
    font-size: 14px;
    color: rgb(11, 114, 231);

}

.login_btn {
    display: block;
    margin: 5px auto;
    width: 100%;
}

.register_btn {
    display: block;
    margin: 5px auto;
    width: 100%;
}
</style>
  